package myJs.user.changePassword

import myJs.CpLayer
import myJs.Implicits._
import myJs.api.Api
import myJs.cps._
import myJs.myPkg.reactHookForm._
import myJs.myPkg.{NavigateOptions, ReactRouterDOM}
import myJs.tool.Tool
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.{Pojo, User}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.{JSON, |}

/** Created by yz on 21/1/2022
  */
@react object Cp {

  val curPage = ChangePassword
  type Props = Unit

  val component = FunctionalComponent[Props] { props =>
    val useForm = ReactHookForm.useForm(
      UseFormOptions(mode = "onChange", resolver = yupResolver(Schema.schema))
    )
    val (info, setInfo) = useState("")
    val (password, setPassword) = useState("")
    val (newPassword, setNewPassword) = useState("")
    val (newPasswordAgain, setNewPasswordAgain) = useState("")
    val navigate = ReactRouterDOM.useNavigate()

    object FTool {

      def passwordChange = (v: String) => {
        setPassword(v)
      }

      def newPasswordChange = (v: String) => {
        setNewPassword(v)
      }

      def newPasswordAgainChange = (v: String) => {
        setNewPasswordAgain(v)
      }

      def changePassword = () => {
        val account = Tool.getAccount
        val request = User.ChangePassword.Request(
          password = password,
          newPassword = newPassword,
          name = account
        )
        Api.user.changePassword(request).map { response =>
          if (response.valid) {
            navigate(
              "/",
              options = NavigateOptions(state =
                js.Dictionary("message" -> "密码修改成功！", "errorClass" -> "text-success")
              )
            )
          } else {
            setInfo("密码错误！")
          }
        }
        ()
      }

      def formSubmit = useForm.handleSubmit((data: js.Dictionary[js.Any]) => {
        println(JSON.stringify(data))
        FTool.changePassword()
      })

    }

    useEffect(
      () => {
        if (newPassword.nonBlank) {
          useForm.trigger("newPasswordAgain")
        }
      },
      List(newPassword)
    )

    CpLayer(title = curPage.titleStr)(
      div(
        className := "page-content",
        div(
          className := "page-bar",
          ul(
            className := "page-breadcrumb",
            li(
              i(className := "fa fa-key"),
              " ",
              a(href := s"#", "密码修改")
            )
          )
        ),
        div(
          className := "row-fluid",
          div(
            className := "row",
            div(
              className := "col-md-12 col-sm-12",
              div(
                className := "portlet blue-madison box",
                div(className := "portlet-title", div(className := "caption", "密码修改")),
                div(
                  className := "portlet-body",
                  form(
                    className := "form-horizontal",
                    onSubmit := FTool.formSubmit,
                    style := Style(marginTop = "30px"),
                    div(
                      className := "col-sm-offset-2",
                      span(style := Style(lineHeight = "35px"), className := "error", info)
                    ),
                    InputInlinePasswordCp(
                      useForm = useForm,
                      label = "旧密码",
                      name = "password",
                      inputWidth = 3,
                      value = password,
                      onChange = FTool.passwordChange,
                      placeHolder = "旧密码"
                    ),
                    InputInlinePasswordCp(
                      useForm = useForm,
                      label = "新密码",
                      name = "newPassword",
                      inputWidth = 3,
                      value = newPassword,
                      onChange = FTool.newPasswordChange,
                      placeHolder = "新密码"
                    ),
                    InputInlinePasswordCp(
                      useForm = useForm,
                      label = "再次确认新密码",
                      name = "newPasswordAgain",
                      inputWidth = 3,
                      value = newPasswordAgain,
                      onChange = FTool.newPasswordAgainChange,
                      placeHolder = "再次确认新密码"
                    ),
                    div(
                      className := "form-group",
                      div(
                        className := "actions col-sm-offset-2 col-sm-2",
                        button(
                          `type` := "submit",
                          className := "btn btn-primary",
                          style := Style(width = "90%"),
                          "确认修改"
                        )
                      )
                    )
                  )
                )
              )
            )
          )
        )
      )
    )

  }

}
